<template>
  <div class="menu-item">
    <template v-if="!data.children">
      <el-menu-item :key="data.id" :index="data.id.toString()">{{ data.name }}12</el-menu-item>
    </template>
    <el-submenu v-if="data.children" :key="data.id" :index="data.id + ''">
      <template slot="title">{{ data.name }}</template>
      <template v-for="item in data.children">
        <template v-if="!item.children">
          <el-menu-item :key="item.id" :index="item.id + ''">{{ item.name }}</el-menu-item>
        </template>
        <template v-if="item.children && item.children.length > 0">
          <menu-item :key="item.id" :data="item" />
        </template>
      </template>
    </el-submenu>
  </div>
</template>

<script>
export default {
  name: 'MenuItem',
  components: {},
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      activeIndex: ''
    }
  },
  methods: {}
}
</script>
